<template>
    <div class="cart">
      <!--导航-->
      <nav-bar>
        <div slot="center" class="nav-bar">
          购物车({{cartTotalcount}})
        </div>
      </nav-bar>
      <!--商品列表-->
       <cart-list/>
      <!--底部汇总-->
      <cart-bottom-bar/>

    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import NavBar from 'content/navbar/NavBar'
  import CartList from './childComps/CartList'
  import CartBottomBar from './childComps/CartBottomBar'
    export default {
        name: "Car",
      components:{
        NavBar,
        CartList,
        CartBottomBar
      },
      computed:{
        //两种语法
          //...mapGetters(['cartLength'])
        ...mapGetters({
          length:'cartLength',
          list:'cartList',
        }),


      cartTotalcount() {
        return this.list.filter(item => item.checked).reduce((preValue, item) => {
          return preValue + item.count
        }, 0)
      }
      }
    }
</script>

<style scoped>
  .cart{height: 100vh}
 .nav-bar{
   background-color: var(--color-tint);
   color: #fff;
   text-align: center;
   display: block;
 }
</style>
